{% extends "layout.html" %}
{% block body %}
<body>
    <script type="text/javascript" charset="utf-8">
        $.util.namespace("gj");
        $(function () {
            var current_tab = $('#mainTabs').tabs('getSelected');
            //console.log(current_tab);
            var gj_tab = current_tab.find('.gjmb-tab');
            var gj_devid = gj_tab.data('devid');
            /*
            gj.dzs = gj_tab.data('dzs');
            console.log(gj.dzs.length);
            var jmpdzs = new Array();
            for (var i = 0; i < gj.dzs.length; i++) {
                //console.log(gj.dzs[i]['jmp.id0']);
                if (gj.dzs[i]['jmp.id0']) {
                    //console.log(gj.dzs[i]['jmp.id0']);
                    jmpdzs.push(gj.dzs[i]);

                }
            }
            console.log(jmpdzs.length);
            */

            
            
            gj.jmp_pt = gj_tab.find('span.jmp-pt');
    /*

            gj.jmp.each(function () {
                //console.log($(this).data('dz'));
                var jmp_port = $(this);
                var jmp_port_dz = $(this).data('dz');
                //var id0=$(this).data('id0');
                //console.log(c);
                //console.log(id0);
                for (var i = 0; i < jmpdzs.length; i++) {
                    if ((jmpdzs[i]['jmp.rdz'] == jmp_port_dz || jmpdzs[i]['jmp.cdz'] == jmp_port_dz) && jmpdzs[i]['dz.dz'] != jmp_port_dz) {
                        //console.log(jmpdzs[i]);
                        //console.log($(".pw[data-dz="+jmpdzs[i]['dz.dz']+"]").text());
                        pw_tip = gj_tab.find('.pw[data-dz="' + jmpdzs[i]['dz.dz'] + '"]').clone();
                        //console.log(tj);
                        jmp_port.after(pw_tip);
                    }

                }

            });
            
    */
            //跳接关系的端子点击高亮
            gj.jmp_pt.click(function () {
                gj.jmp_highlight = $(this).hasClass('highlight');
                gj.other_jmp_port_dz = $(this).next().data('dz');
                //console.log(gj.other_jmp_port_dz);
                gj.other_jump_port = gj_tab.find('.jmp-pt[data-dz="' + gj.other_jmp_port_dz + '"]');
                gj.jmp_pt.removeClass('highlight');

                if (!gj.jmp_highlight) {
                    $(this).addClass('highlight');
                    gj.other_jump_port.addClass('highlight');
                }
            });

            //跳接关系的文字显示
            
            /*
            gj.pw = gj_tab.find('span.pw');
            var pw_dict={};
            gj.pw.each(function(){
                pw_dict[$(this).data('dz')]=$(this).text();
            });
            gj.jmp_pw = gj_tab.find('span.jmp-pw');
            gj.jmp_pw.each(function(){
                $a = $('<a>').attr('href','#'+gj_devid+'-'+$(this).data('dz')).text(pw_dict[$(this).data('dz')]);
                $(this).append($a);
            });
            */
            


            {#        gj.cds = gj_tab.find('.gjmb-tab').data('cds');#}
            {#        console.log(gj.cds.length);#}
            {#        for(var i=0;i<gj.cds.length;i++){#}
            {#            //console.log(gj.cds[i]['cd.dz']);#}
            {#            var cd_dz=gj.cds[i]['cd.dz'];#}
            {#            var cd_gl=gj.cds[i]['gld.mc']+'/'+gj.cds[i]['cd.qx'];#}
            {#            var $cd_gl="<br /><div style='background-color:skyblue'>"+cd_gl+"</div>";#}
            {#            gj_tab.find('.dz[data-dz="'+cd_dz+'"]').append($cd_gl);#}
            {#            #}
            {#        }#}


            //根据光缆成端div的高度调整tr的高度
            gj_tab.find('tr.tr_row').each(function () {
                //console.log($(this).data('dz'));
                //console.log($(this).find('th').text());
                //console.log('tr:'+$(this).height());
                //console.log('gl-cd:'+$(this).find('div.gl-cd').height());
                $(this).height($(this).height() + $(this).find('div.gl-cd').height()+ $(this).find('div.gl-tj').height()+1);
            });



        });
    </script>
    <div class="easyui-layout" data-options="fit:true">
        <div title="DataGrid" data-options="region: 'center', border: false, noheader: true">
            <div class="easyui-panel gjmb-tab" data-options="fit: true, border: false" style="padding:5px" data-devid="{{ devid }}">
                {% for table in tables %}
                <table class="mb-table" border="1" cellspacing="0">
                    <thead>
                        <tr>
                            <th colspan="{{ table.max_col+1 }}" style="background-color:antiquewhite;font-size:28px;">{{ table.table }}框</th>
                        </tr>
                        <tr>
                            <th></th>
                            {% for dzcol in range(1, table.max_col+1) %}
                            <th>{{ dzcol }}</th>
                            {% endfor %}
                        </tr>
                    </thead>
                    <tbody>
                    {% for tr in table.trs %}
                        <tr class="tr_row">
                            <th>{{ tr.tr }}</th>
                            {% if tr.tds %}
                                {% for td in tr.tds %}
                            <td id="{{ 1 }}-{{ td[1] }}-{{ td[0] }}"  style="background-color:{% if td[7]=='其它' %} lightgrey{% endif %}{% if td[7]=='坏' %} red{% endif %}{% if td[7]=='预留' %} yellow{% endif %}{% if td[7]=='空闲' %} transparent{% endif %}">
                                <div class="dz-wrapper">
                                    <span class="pw">{{ dz_pw[td[0]] }}</span><br/>
                                    {% if td[8] %}
                                        {% for bz in td[8] %}
                                            {{ bz or '' }}<br/>
                                        {% endfor %}
                                    {% endif %}
                                    <div class="dz-wrap">
                                    {% if td[9] %}
                                        <div class="gl-tj">
                                            <span class="jmp-pt" data-dz="{{ td[0] }}">◎</span>
                                            <span class="jmp-pw" data-dz="{{ td[11] }}"><a href="#{{ td[9] }}-{{ td[10] }}-{{ td[11] }}">{{ dz_pw[td[11]] }}</a></span>
                                        </div>
                                    {% endif %}
                                         <div class="gl-cd {{ gl_jb['%s-%s'%(td[2],td[6])] }}">
                                            {{ gl_cd['%s-%s'%(td[2],td[6])] }}
                                        </div>
                                    </div>
                                </div>
                            </td>
                                {% endfor %}
                            {% else %}
                            <td colspan="{{ table.max_col }}"></td>
                            {% endif %}

                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
                <p></p>
                {% endfor %}
            </div>
        </div>
    </div>
</body>
{% endblock %}

